<template>
  <div class="h-screen flex flex-col bg-gray-50 dark:bg-gray-900 transition-colors duration-300">
    <!-- 顶部工具栏 -->
    <div class="flex-shrink-0 bg-white dark:bg-gray-800 border-b border-gray-200 dark:border-gray-700 shadow-sm">
      <div class="flex items-center justify-between px-4 sm:px-6 py-3">
        <div class="flex items-center space-x-4">
          <h1 class="text-lg sm:text-xl font-semibold text-gray-900 dark:text-gray-100 flex items-center">
            <i class="fab fa-html5 text-orange-500 mr-2"></i>
            HTML 转换器
      </h1>
          
          <!-- 主题选择器 -->
          <div class="flex items-center space-x-2">
          <select 
            v-model="selectedTheme"
              @change="updatePreview"
              class="text-sm border border-gray-300 dark:border-gray-600 rounded-lg px-3 py-1.5 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 focus:ring-2 focus:ring-orange-500"
            >
              <option v-for="theme in availableThemes" :key="theme.value" :value="theme.value">
                {{ theme.label }}
              </option>
          </select>
          </div>
          
          <!-- 文档类型选择器 -->
          <div class="flex items-center space-x-2">
            <select 
              v-model="documentType" 
              @change="applyDocumentType"
              class="text-sm border border-gray-300 dark:border-gray-600 rounded-lg px-3 py-1.5 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 focus:ring-2 focus:ring-blue-500"
            >
              <option v-for="type in documentTypes" :key="type.value" :value="type.value">
                {{ type.label }}
              </option>
            </select>
        </div>
        </div>
        
        <div class="flex items-center space-x-2">
          <!-- 实时预览切换 -->
          <button 
            @click="autoPreview = !autoPreview"
            :class="[
              autoPreview 
                ? 'bg-green-100 dark:bg-green-900/30 text-green-700 dark:text-green-400 border-green-300 dark:border-green-600' 
                : 'bg-gray-100 dark:bg-gray-700 text-gray-600 dark:text-gray-400 border-gray-300 dark:border-gray-600',
              'px-3 py-2 text-sm border rounded-lg transition-all duration-200 hover:shadow-sm'
            ]"
          >
            <i class="fas fa-sync-alt mr-2"></i>
            {{ autoPreview ? '实时预览' : '手动预览' }}
          </button>
          
          <!-- 导出按钮 -->
          <div class="relative">
            <button
              @click="toggleExportMenu"
              class="inline-flex items-center px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg text-sm font-medium text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600"
          >
            <i class="fas fa-download mr-2"></i>
              导出
              <i class="fas fa-chevron-down ml-1 text-xs"></i>
            </button>
            
            <div v-if="showExportMenu" class="absolute right-0 top-full mt-2 w-48 bg-white dark:bg-gray-700 rounded-lg shadow-lg border border-gray-200 dark:border-gray-600 z-50">
              <div class="py-1">
                <button
                  v-for="format in exportFormats"
                  :key="format.type"
                  @click="exportHtml(format.type)"
                  class="w-full text-left px-4 py-2 text-sm text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-600 flex items-center"
                >
                  <i :class="format.icon" class="mr-3 w-4 text-center"></i>
                  {{ format.label }}
          </button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 主内容区域 -->
    <div class="flex-1 flex overflow-hidden">
      <!-- 编辑器面板 -->
      <div 
        class="bg-white dark:bg-gray-800 border-r border-gray-200 dark:border-gray-700 flex flex-col"
        :style="{ width: leftPanelWidth + 'px' }"
      >
        <!-- 编辑器头部 -->
        <div class="flex-shrink-0 flex items-center justify-between p-3 border-b border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-750">
          <div class="flex items-center space-x-3">
            <h3 class="text-sm font-medium text-gray-900 dark:text-gray-100">
              <i class="fab fa-markdown text-orange-500 mr-2"></i>
              Markdown 源码
            </h3>
            <span class="text-xs text-gray-500 dark:text-gray-400 bg-gray-200 dark:bg-gray-600 px-2 py-1 rounded">
              {{ markdownContent.length }} 字符
            </span>
            <span class="text-xs text-green-600 dark:text-green-400 bg-green-100 dark:bg-green-900/30 px-2 py-1 rounded">
              {{ wordCount }} 词
            </span>
          </div>
          
          <div class="flex items-center space-x-2">
            <button
              @click="insertTemplate"
              class="px-2 py-1 text-xs bg-blue-100 dark:bg-blue-900/30 text-blue-700 dark:text-blue-400 border border-blue-300 dark:border-blue-600 rounded-lg hover:shadow-sm"
              title="插入模板"
            >
              <i class="fas fa-plus mr-1"></i>
              模板
            </button>
            
            <button
              @click="formatMarkdown"
              class="px-2 py-1 text-xs bg-purple-100 dark:bg-purple-900/30 text-purple-700 dark:text-purple-400 border border-purple-300 dark:border-purple-600 rounded-lg hover:shadow-sm"
              title="格式化"
            >
              <i class="fas fa-magic mr-1"></i>
              格式化
            </button>
          </div>
        </div>
        
        <!-- 代码编辑器 -->
        <div class="flex-1 relative">
          <textarea
            ref="editorTextarea"
            v-model="markdownContent"
            @input="handleEditorInput"
            @keydown="handleKeydown"
            class="w-full h-full p-4 font-mono text-sm bg-transparent text-gray-900 dark:text-gray-100 resize-none border-0 focus:outline-none focus:ring-0"
            :placeholder="placeholderText"
            spellcheck="false"
            ></textarea>
          </div>
        
        <!-- 编辑器底部状态栏 -->
        <div class="flex-shrink-0 px-4 py-2 bg-gray-50 dark:bg-gray-750 border-t border-gray-200 dark:border-gray-700 flex items-center justify-between text-xs text-gray-500 dark:text-gray-400">
          <div class="flex items-center space-x-4">
            <span>行: {{ currentLine }}</span>
            <span>列: {{ currentColumn }}</span>
            <span v-if="lastRenderTime" class="text-green-600 dark:text-green-400">
              <i class="fas fa-check-circle mr-1"></i>
              {{ lastRenderTime }}ms
            </span>
          </div>
          
          <div class="flex items-center space-x-2">
            <button
              @click="copyMarkdown"
              class="hover:text-blue-600 dark:hover:text-blue-400 transition-colors duration-150"
              title="复制 Markdown"
            >
              <i class="fab fa-markdown"></i>
            </button>
            <button
              @click="copyHtml"
              class="hover:text-orange-600 dark:hover:text-orange-400 transition-colors duration-150"
              title="复制 HTML"
            >
              <i class="fab fa-html5"></i>
            </button>
            </div>
          </div>
        </div>

        <!-- 拖拽分隔条 -->
        <div
          @mousedown="startResize"
        class="w-1 bg-gray-200 dark:bg-gray-700 hover:bg-orange-500 dark:hover:bg-orange-400 cursor-col-resize transition-colors duration-200 group relative"
        >
        <div class="absolute inset-y-0 -left-1 -right-1 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity duration-200">
          <div class="w-0.5 h-8 bg-orange-500 dark:bg-orange-400 rounded-full"></div>
        </div>
        </div>

      <!-- 预览面板 -->
      <div class="flex-1 flex flex-col bg-white dark:bg-gray-800">
        <!-- 预览头部 -->
        <div class="flex-shrink-0 flex items-center justify-between p-3 border-b border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-750">
          <div class="flex items-center space-x-3">
            <h3 class="text-sm font-medium text-gray-900 dark:text-gray-100">
              <i class="fas fa-eye text-green-500 mr-2"></i>
              HTML 预览
            </h3>
            <span class="text-xs text-gray-500 dark:text-gray-400 bg-gray-200 dark:bg-gray-600 px-2 py-1 rounded">
              {{ selectedTheme }}
            </span>
          </div>
          
            <div class="flex items-center space-x-2">
            <!-- 查看模式切换 -->
            <div class="flex items-center space-x-1 bg-white dark:bg-gray-700 rounded-lg border border-gray-200 dark:border-gray-600">
              <button
                @click="viewMode = 'preview'"
                :class="[
                  viewMode === 'preview' ? 'bg-blue-100 dark:bg-blue-900/30 text-blue-700 dark:text-blue-400' : 'text-gray-600 dark:text-gray-400',
                  'px-2 py-1 text-xs rounded-l-lg transition-colors duration-150'
                ]"
              >
                预览
              </button>
              <button
                @click="viewMode = 'code'"
                :class="[
                  viewMode === 'code' ? 'bg-orange-100 dark:bg-orange-900/30 text-orange-700 dark:text-orange-400' : 'text-gray-600 dark:text-gray-400',
                  'px-2 py-1 text-xs transition-colors duration-150'
                ]"
              >
                代码
              </button>
              <button
                @click="viewMode = 'split'"
                :class="[
                  viewMode === 'split' ? 'bg-purple-100 dark:bg-purple-900/30 text-purple-700 dark:text-purple-400' : 'text-gray-600 dark:text-gray-400',
                  'px-2 py-1 text-xs rounded-r-lg transition-colors duration-150'
                ]"
              >
                分屏
              </button>
            </div>
            
            <!-- 刷新按钮 -->
            <button
              @click="updatePreview"
              class="p-1.5 text-gray-600 dark:text-gray-400 hover:text-green-600 dark:hover:text-green-400 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg transition-all duration-150"
              title="刷新预览"
            >
              <i class="fas fa-sync-alt text-xs"></i>
            </button>
          </div>
        </div>
        
        <!-- 预览内容 -->
        <div class="flex-1 overflow-hidden">
          <!-- 预览模式 -->
          <div 
            v-if="viewMode === 'preview'"
            class="h-full overflow-auto p-4 bg-gradient-to-br from-gray-50 to-white dark:from-gray-800 dark:to-gray-900"
          >
            <div 
              v-if="!markdownContent.trim()" 
              class="h-full flex flex-col items-center justify-center text-gray-500 dark:text-gray-400"
            >
              <i class="fab fa-html5 text-6xl mb-4 opacity-20"></i>
              <p class="text-lg mb-2">开始编写 Markdown</p>
              <p class="text-sm mb-4">左侧输入内容，右侧实时预览</p>
              <div class="grid grid-cols-2 gap-3">
                <button
                  v-for="type in documentTypes.slice(0, 4)"
                  :key="type.value"
                  @click="selectDocumentType(type.value)"
                  class="px-4 py-2 bg-white dark:bg-gray-700 border border-gray-200 dark:border-gray-600 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-600 text-sm"
                >
                  {{ type.label }}
                </button>
                </div>
              </div>
            
            <div 
              v-else
              :class="themeClasses"
              class="prose max-w-none transition-all duration-300"
              v-html="renderedHtml"
            ></div>
            </div>
          
          <!-- 代码模式 -->
          <div 
            v-else-if="viewMode === 'code'"
            class="h-full overflow-auto p-4 bg-gray-900 text-green-400 font-mono text-sm"
          >
            <pre class="whitespace-pre-wrap">{{ fullHtmlOutput }}</pre>
          </div>
          
          <!-- 分屏模式 -->
          <div 
            v-else
            class="h-full flex"
          >
            <div class="flex-1 overflow-auto p-4 bg-gradient-to-br from-gray-50 to-white dark:from-gray-800 dark:to-gray-900 border-r border-gray-200 dark:border-gray-700">
              <div 
                :class="themeClasses"
                class="prose max-w-none transition-all duration-300"
                v-html="renderedHtml"
              ></div>
        </div>
            <div class="flex-1 overflow-auto p-4 bg-gray-900 text-green-400 font-mono text-xs">
              <pre class="whitespace-pre-wrap">{{ fullHtmlOutput }}</pre>
      </div>
    </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted, nextTick } from 'vue'
import { marked } from 'marked'

// 响应式状态
const markdownContent = ref('')
const selectedTheme = ref('github')
const documentType = ref('article')
const viewMode = ref('preview')
const autoPreview = ref(true)
const showExportMenu = ref(false)
const leftPanelWidth = ref(500)
const currentLine = ref(1)
const currentColumn = ref(1)
const lastRenderTime = ref(0)

// DOM 引用
const editorTextarea = ref<HTMLTextAreaElement>()

// 主题配置
const availableThemes = [
  { value: 'github', label: 'GitHub - 经典白色' },
  { value: 'github-dark', label: 'GitHub Dark - 深色主题' },
  { value: 'apple-notes', label: 'Apple Notes - 苹果记事本' },
  { value: 'cyberpunk', label: 'Cyberpunk - 赛博朋克' },
  { value: 'neon-tech', label: 'Neon Tech - 霓虹科技' },
  { value: 'retro-terminal', label: 'Retro Terminal - 复古终端' },
  { value: 'material-design', label: 'Material Design - 质感设计' },
  { value: 'paper-classic', label: 'Paper Classic - 经典纸质' },
  { value: 'dark-pro', label: 'Dark Pro - 专业深色' },
  { value: 'gradient-modern', label: 'Gradient Modern - 渐变现代' },
  { value: 'minimalist-zen', label: 'Minimalist Zen - 极简禅意' },
  { value: 'academic', label: 'Academic - 学术论文' },
  { value: 'blog', label: 'Blog - 博客风格' },
  { value: 'docs', label: 'Docs - 文档风格' },
  { value: 'minimal', label: 'Minimal - 极简风格' },
  { value: 'magazine', label: 'Magazine - 杂志风格' },
  { value: 'newspaper', label: 'Newspaper - 报纸风格' },
  { value: 'book', label: 'Book - 书籍风格' },
  { value: 'presentation', label: 'Presentation - 演示风格' }
]

// 文档类型
const documentTypes = [
  { value: 'article', label: '文章' },
  { value: 'blog', label: '博客' },
  { value: 'documentation', label: '文档' },
  { value: 'readme', label: 'README' },
  { value: 'tutorial', label: '教程' },
  { value: 'guide', label: '指南' },
  { value: 'report', label: '报告' },
  { value: 'paper', label: '论文' }
]

// 导出格式
const exportFormats = [
  { type: 'html', label: '完整 HTML 文件', icon: 'fab fa-html5' },
  { type: 'html-fragment', label: 'HTML 片段', icon: 'fas fa-code' },
  { type: 'pdf', label: 'PDF 文档', icon: 'fas fa-file-pdf' },
  { type: 'docx', label: 'Word 文档', icon: 'fas fa-file-word' },
  { type: 'md', label: 'Markdown 文件', icon: 'fab fa-markdown' }
]

// 文档模板
const documentTemplates = {
  article: `# 文章标题

## 概要

这里是文章的概要描述...

## 正文

### 第一节

内容...

### 第二节

更多内容...

## 结论

总结...`,

  blog: `# 博客标题

*发布时间：${new Date().toLocaleDateString()}*

这是一篇博客文章的开头...

## 主要内容

- 要点一
- 要点二
- 要点三

> 引用的内容

\`\`\`javascript
// 代码示例
console.log('Hello World!')
\`\`\`

## 结语

感谢阅读！`,

  documentation: `# 项目文档

## 安装

\`\`\`bash
npm install your-package-name
\`\`\`

## 使用方法

### 基础用法

\`\`\`javascript
import { yourFunction } from 'your-package-name'

function()
\`\`\`

### 高级用法

详细说明...

## API 参考

| 方法 | 参数 | 返回值 | 描述 |
|------|------|--------|------|
| method1 | param | value | 说明 |

## 更新日志

### v1.0.0
- 初始版本`,

  readme: `# 项目名称

项目的简短描述

## 特性

- ✨ 特性一
- 🚀 特性二
- 📦 特性三

## 快速开始

\`\`\`bash
# 安装
npm install

# 运行
npm start
\`\`\`

## 贡献

欢迎提交 PR！

## 许可证

MIT License`
}

// 计算属性
const wordCount = computed(() => {
  return markdownContent.value.trim().split(/\s+/).filter(word => word.length > 0).length
})

const themeClasses = computed(() => {
  const baseClasses = 'prose max-w-none transition-all duration-300'
  
  const themes = {
    'github': `${baseClasses} prose-lg prose-gray dark:prose-invert`,
    'github-dark': `${baseClasses} prose-lg prose-invert bg-gray-900 text-gray-100 p-6 rounded-lg`,
    'apple-notes': `${baseClasses} prose-lg prose-amber font-serif bg-yellow-50 text-gray-800 p-6 rounded-lg shadow-sm border border-yellow-200`,
    'cyberpunk': `${baseClasses} prose-lg prose-pink bg-black text-green-400 font-mono p-6 rounded-lg border border-pink-500 shadow-pink-500/20 shadow-lg`,
    'neon-tech': `${baseClasses} prose-lg prose-cyan bg-gray-900 text-cyan-400 font-sans p-6 rounded-lg border border-cyan-500 shadow-cyan-500/20 shadow-lg`,
    'retro-terminal': `${baseClasses} prose-lg prose-green bg-black text-green-400 font-mono text-sm p-6 rounded border-2 border-green-500`,
    'material-design': `${baseClasses} prose-lg prose-blue bg-gray-50 text-gray-800 font-sans p-6 rounded-lg shadow-md border border-blue-200`,
    'paper-classic': `${baseClasses} prose-lg prose-stone bg-yellow-50 text-gray-800 font-serif p-6 shadow-lg border border-yellow-300`,
    'dark-pro': `${baseClasses} prose-lg prose-slate bg-gray-800 text-gray-100 font-sans p-6 rounded-lg border border-gray-600`,
    'gradient-modern': `${baseClasses} prose-xl prose-white text-white font-sans p-8 rounded-lg shadow-xl gradient-bg`,
    'minimalist-zen': `${baseClasses} prose-lg prose-gray bg-white text-gray-700 font-serif p-8 border-l-4 border-gray-300`,
    'academic': `${baseClasses} prose-lg prose-gray font-serif text-justify p-6 bg-white border border-gray-200 shadow-sm`,
    'blog': `${baseClasses} prose-lg prose-blue bg-white p-6 rounded-lg shadow-sm border border-blue-100`,
    'docs': `${baseClasses} prose-lg prose-slate font-sans bg-slate-50 p-6 border-l-4 border-slate-400`,
    'minimal': `${baseClasses} prose-lg prose-stone text-sm bg-white p-4 border border-gray-100`,
    'magazine': `${baseClasses} prose-lg prose-indigo bg-white p-6 shadow-lg border border-indigo-200`,
    'newspaper': `${baseClasses} prose-sm prose-gray bg-white p-6 border border-gray-300 shadow-sm`,
    'book': `${baseClasses} prose-lg prose-gray font-serif bg-cream p-8 shadow-lg border border-amber-200`,
    'presentation': `${baseClasses} prose-xl prose-gray text-center bg-white p-8 rounded-lg shadow-lg border border-gray-200`
  }
  
  return themes[selectedTheme.value as keyof typeof themes] || themes.github
})

const renderedHtml = computed(() => {
  if (!markdownContent.value.trim()) return ''
  
  const startTime = performance.now()
  
  // 配置 marked
  marked.setOptions({
    breaks: true,
    gfm: true
  })
  
  try {
    const html = marked(markdownContent.value) as string
    
    const endTime = performance.now()
    lastRenderTime.value = Math.round(endTime - startTime)
  
  return html
  } catch (error) {
    console.error('Markdown 解析错误:', error)
    return '<div class="text-red-500 p-4">Markdown 解析错误</div>'
  }
})

const fullHtmlOutput = computed(() => {
  if (!markdownContent.value.trim()) return ''
  
  const cssStyles = getThemeCSS()
  const title = extractTitle(markdownContent.value) || '文档'
  
  try {
    const htmlContent = marked(markdownContent.value) as string
    
    return `<!DOCTYPE html>
    <html lang="zh-CN">
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>${title}</title>
      <style>
        ${cssStyles}
      </style>
    </head>
    <body>
    <div class="container">
      ${htmlContent}
    </div>
    </body>
</html>`
  } catch (error) {
    console.error('HTML 生成错误:', error)
    return '<div class="text-red-500">HTML 生成错误</div>'
  }
})

const placeholderText = `# 欢迎使用 Markdown 转 HTML 工具

这是一个功能强大的 Markdown 转 HTML 转换器。

## 特性

- 📝 **实时预览** - 边写边看效果
- 🎨 **多种主题** - 适配不同场景
- 📱 **响应式设计** - 支持各种设备
- 🚀 **性能优化** - 快速渲染

## 代码示例

\`\`\`javascript
console.log('Hello, Markdown!')
\`\`\`

## 表格支持

| 特性 | 状态 | 描述 |
|------|------|------|
| 语法高亮 | ✅ | 支持多种语言 |
| 数学公式 | ✅ | LaTeX 语法 |
| 图表支持 | ✅ | Mermaid 图表 |

> 开始编写您的 Markdown 内容吧！`

// 方法
function updatePreview() {
  // 强制更新预览
  nextTick(() => {
    console.log('预览已更新')
  })
}

function applyDocumentType() {
  // 应用文档类型逻辑
}

function selectDocumentType(type: string) {
  documentType.value = type
  markdownContent.value = documentTemplates[type as keyof typeof documentTemplates] || placeholderText
}

function toggleExportMenu() {
  showExportMenu.value = !showExportMenu.value
}

function exportHtml(format: string) {
  showExportMenu.value = false
  
  try {
    switch (format) {
      case 'html':
        downloadFile(fullHtmlOutput.value, 'document.html', 'text/html')
        break
      case 'html-fragment':
        downloadFile(renderedHtml.value, 'fragment.html', 'text/html')
        break
      case 'md':
        downloadFile(markdownContent.value, 'document.md', 'text/markdown')
        break
      case 'pdf':
        exportToPDF()
        break
      case 'docx':
        exportToDocx()
        break
    }
  } catch (error) {
    console.error('导出失败:', error)
  }
}

function downloadFile(content: string, filename: string, mimeType: string) {
  const blob = new Blob([content], { type: mimeType })
  const url = URL.createObjectURL(blob)
  const link = document.createElement('a')
  link.href = url
  link.download = filename
  document.body.appendChild(link)
  link.click()
  document.body.removeChild(link)
  URL.revokeObjectURL(url)
}

function exportToPDF() {
  // PDF 导出功能
  window.print()
}

function exportToDocx() {
  // Word 导出功能
  console.log('Word 导出功能开发中...')
}

function insertTemplate() {
  // 插入模板逻辑
}

function formatMarkdown() {
  // 格式化 Markdown
  markdownContent.value = markdownContent.value
    .replace(/\n{3,}/g, '\n\n') // 移除多余空行
    .replace(/^(\s*-\s+)/gm, '- ') // 规范列表格式
    .replace(/^(\s*\d+\.\s+)/gm, (match, p1) => {
      const num = p1.match(/\d+/)[0]
      return `${num}. `
    })
    .trim()
}

function handleEditorInput() {
  updateCursorPosition()
  
  if (autoPreview.value) {
    debouncedUpdate()
  }
}

function updateCursorPosition() {
  if (!editorTextarea.value) return
  
  const textarea = editorTextarea.value
  const cursorPos = textarea.selectionStart
  const textBeforeCursor = markdownContent.value.substring(0, cursorPos)
  
  currentLine.value = textBeforeCursor.split('\n').length
  currentColumn.value = textBeforeCursor.split('\n').pop()?.length || 0
}

// 防抖更新
let updateTimeout: NodeJS.Timeout
const debouncedUpdate = () => {
  clearTimeout(updateTimeout)
  updateTimeout = setTimeout(() => {
    updatePreview()
  }, 300)
}

function handleKeydown(event: KeyboardEvent) {
  // Tab 键处理
  if (event.key === 'Tab') {
    event.preventDefault()
    const textarea = event.target as HTMLTextAreaElement
    const start = textarea.selectionStart
    const end = textarea.selectionEnd
    
    if (event.shiftKey) {
      // Shift+Tab: 减少缩进
      const lines = markdownContent.value.split('\n')
      const startLine = markdownContent.value.substring(0, start).split('\n').length - 1
      const endLine = markdownContent.value.substring(0, end).split('\n').length - 1
      
      for (let i = startLine; i <= endLine; i++) {
        if (lines[i].startsWith('    ')) {
          lines[i] = lines[i].substring(4)
        } else if (lines[i].startsWith('  ')) {
          lines[i] = lines[i].substring(2)
        }
      }
      
      markdownContent.value = lines.join('\n')
  } else {
      // Tab: 增加缩进
      const beforeCursor = markdownContent.value.substring(0, start)
      const afterCursor = markdownContent.value.substring(end)
      
      markdownContent.value = beforeCursor + '    ' + afterCursor
      
      nextTick(() => {
        textarea.selectionStart = textarea.selectionEnd = start + 4
      })
    }
  }
  
  // Ctrl+Enter: 强制更新预览
  if ((event.ctrlKey || event.metaKey) && event.key === 'Enter') {
    event.preventDefault()
    updatePreview()
  }
}

async function copyMarkdown() {
  try {
    await navigator.clipboard.writeText(markdownContent.value)
    console.log('Markdown 已复制')
  } catch (error) {
    console.error('复制失败:', error)
  }
}

async function copyHtml() {
  try {
    await navigator.clipboard.writeText(renderedHtml.value)
    console.log('HTML 已复制')
  } catch (error) {
    console.error('复制失败:', error)
  }
}

function extractTitle(markdown: string): string {
  const match = markdown.match(/^#\s+(.+)/m)
  return match ? match[1].trim() : ''
}

function getThemeCSS(): string {
  const baseCSS = `
    body {
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
      line-height: 1.6;
      color: #333;
      max-width: 100%;
      margin: 0;
      padding: 20px;
      background: #fff;
    }
    
    .container {
      max-width: 800px;
      margin: 0 auto;
    }
    
    h1, h2, h3, h4, h5, h6 {
      margin-top: 24px;
      margin-bottom: 16px;
      font-weight: 600;
      line-height: 1.25;
    }
    
    h1 { font-size: 2em; border-bottom: 1px solid #eaecef; padding-bottom: 10px; }
    h2 { font-size: 1.5em; border-bottom: 1px solid #eaecef; padding-bottom: 8px; }
    h3 { font-size: 1.25em; }
    
    p { margin-bottom: 16px; }
    
    code {
      background: #f6f8fa;
      border-radius: 3px;
      font-size: 85%;
      margin: 0;
      padding: 0.2em 0.4em;
    }
    
    pre {
      background: #f6f8fa;
      border-radius: 6px;
      font-size: 85%;
      line-height: 1.45;
      overflow: auto;
      padding: 16px;
    }
    
    blockquote {
      border-left: 4px solid #dfe2e5;
      color: #6a737d;
      margin: 0;
      padding: 0 16px;
    }
    
    table {
      border-collapse: collapse;
      margin: 16px 0;
      width: 100%;
    }
    
    table th, table td {
      border: 1px solid #dfe2e5;
      padding: 6px 13px;
    }
    
    table th {
      background: #f6f8fa;
      font-weight: 600;
    }
    
    ul, ol { padding-left: 30px; }
    li { margin-bottom: 4px; }
  `
  
  const themeCSS = {
    'github': baseCSS,
    'github-dark': baseCSS + `
      body { background: #0d1117; color: #c9d1d9; }
      h1, h2 { border-bottom-color: #21262d; }
      code, pre { background: #161b22; color: #c9d1d9; }
      blockquote { border-left-color: #3b434b; color: #8b949e; }
      table th, table td { border-color: #30363d; }
      table th { background: #161b22; }
    `,
    'apple-notes': baseCSS + `
      body { 
        font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Helvetica Neue', Arial, sans-serif;
        background: #fefcf6; 
        color: #1d1d1f;
        line-height: 1.7;
      }
      .container { max-width: 650px; padding: 40px 20px; }
      h1, h2, h3 { 
        font-weight: 700; 
        color: #1d1d1f;
        border: none;
        margin-top: 32px;
        margin-bottom: 16px;
      }
      h1 { font-size: 28px; }
      h2 { font-size: 22px; }
      h3 { font-size: 18px; }
      p { font-size: 16px; color: #424245; }
      code { 
        background: #f1f0ea; 
        color: #ff6b35; 
        border-radius: 4px;
        font-family: 'SF Mono', Monaco, monospace;
      }
      pre { 
        background: #f8f7f2; 
        border: 1px solid #e5e3dd;
        border-radius: 8px;
      }
      blockquote { 
        border-left: 3px solid #ff6b35; 
        background: #fefcf6; 
        padding: 16px 20px;
        margin: 20px 0;
        border-radius: 0 4px 4px 0;
        font-style: italic;
      }
    `,
    'cyberpunk': baseCSS + `
      body { 
        font-family: 'JetBrains Mono', 'Courier New', monospace;
        background: linear-gradient(135deg, #0a0a0a 0%, #1a0033 50%, #000 100%); 
        color: #00ff88;
        line-height: 1.6;
      }
      .container { 
        max-width: 800px; 
        background: rgba(0, 0, 0, 0.8);
        border: 1px solid #ff0080;
        border-radius: 8px;
        padding: 30px;
        box-shadow: 0 0 30px rgba(255, 0, 128, 0.3);
      }
      h1, h2, h3 { 
        color: #ff0080; 
        text-shadow: 0 0 10px rgba(255, 0, 128, 0.8);
        border: none;
        text-transform: uppercase;
        letter-spacing: 2px;
      }
      h1 { font-size: 24px; }
      h2 { font-size: 20px; }
      p { color: #00ff88; }
      code { 
        background: rgba(255, 0, 128, 0.1); 
        color: #00ffff; 
        border: 1px solid #ff0080;
        text-shadow: 0 0 5px rgba(0, 255, 255, 0.5);
      }
      pre { 
        background: rgba(0, 0, 0, 0.9); 
        border: 1px solid #00ff88;
        color: #00ff88;
        box-shadow: inset 0 0 20px rgba(0, 255, 136, 0.1);
      }
      blockquote { 
        border-left: 3px solid #00ffff; 
        background: rgba(0, 255, 255, 0.05);
        color: #00ffff;
      }
      a { color: #ff0080; text-decoration: none; text-shadow: 0 0 5px rgba(255, 0, 128, 0.5); }
      a:hover { color: #00ffff; text-shadow: 0 0 8px rgba(0, 255, 255, 0.8); }
    `,
    'neon-tech': baseCSS + `
      body { 
        font-family: 'Roboto', 'Helvetica Neue', Arial, sans-serif;
        background: #0f0f0f; 
        color: #e0e0e0;
        background-image: 
          radial-gradient(circle at 25% 25%, #001122 0%, transparent 50%),
          radial-gradient(circle at 75% 75%, #002211 0%, transparent 50%);
      }
      .container { 
        max-width: 900px; 
        background: rgba(15, 15, 15, 0.95);
        border: 1px solid #00d4ff;
        border-radius: 12px;
        padding: 40px;
        box-shadow: 0 0 40px rgba(0, 212, 255, 0.2);
      }
      h1, h2, h3 { 
        color: #00d4ff; 
        border: none;
        font-weight: 300;
        text-shadow: 0 0 15px rgba(0, 212, 255, 0.6);
      }
      h1 { font-size: 32px; letter-spacing: 3px; }
      h2 { font-size: 24px; letter-spacing: 1px; }
      code { 
        background: rgba(0, 212, 255, 0.1); 
        color: #00ff9f; 
        border: 1px solid rgba(0, 212, 255, 0.3);
        border-radius: 6px;
      }
      pre { 
        background: rgba(0, 0, 0, 0.8); 
        border: 1px solid #00ff9f;
        border-radius: 8px;
        color: #00ff9f;
      }
      blockquote { 
        border-left: 4px solid #00ff9f; 
        background: rgba(0, 255, 159, 0.05);
        border-radius: 0 8px 8px 0;
      }
    `,
    'retro-terminal': baseCSS + `
      body { 
        font-family: 'Courier New', 'Monaco', monospace;
        background: #1a1a1a; 
        color: #00ff00;
        line-height: 1.4;
      }
      .container { 
        max-width: 800px; 
        background: #000;
        border: 2px solid #00ff00;
        border-radius: 0;
        padding: 20px;
        font-size: 14px;
      }
      h1, h2, h3 { 
        color: #ffff00; 
        border: none;
        text-transform: uppercase;
        font-weight: bold;
      }
      h1::before { content: ">> "; }
      h2::before { content: "> "; }
      p { margin-bottom: 12px; }
      code { 
        background: #333; 
        color: #ff6600; 
        border: none;
        font-family: inherit;
      }
      pre { 
        background: #111; 
        border: 1px solid #333;
        color: #00ff00;
        border-radius: 0;
      }
      blockquote { 
        border-left: 2px solid #ffff00; 
        background: #1a1a1a;
        color: #cccccc;
        font-style: normal;
      }
      blockquote::before { content: "// "; color: #ffff00; }
    `,
    'material-design': baseCSS + `
      body { 
        font-family: 'Roboto', 'Helvetica Neue', Arial, sans-serif;
        background: #fafafa; 
        color: #212121;
        line-height: 1.6;
      }
      .container { 
        max-width: 800px; 
        background: #fff;
        border-radius: 8px;
        padding: 32px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.08);
        margin-top: 24px;
      }
      h1, h2, h3 { 
        color: #1976d2; 
        border: none;
        font-weight: 500;
      }
      h1 { font-size: 24px; margin-bottom: 8px; }
      h2 { font-size: 20px; margin-bottom: 6px; }
      code { 
        background: #f5f5f5; 
        color: #d32f2f; 
        border-radius: 4px;
        font-family: 'Roboto Mono', monospace;
      }
      pre { 
        background: #f5f5f5; 
        border-radius: 4px;
        border: none;
      }
      blockquote { 
        border-left: 4px solid #2196f3; 
        background: #e3f2fd;
        padding: 16px 20px;
        border-radius: 0 4px 4px 0;
        margin: 16px 0;
      }
      table th { background: #e0e0e0; }
    `,
    'paper-classic': baseCSS + `
      body { 
        font-family: 'Georgia', 'Times New Roman', serif;
        background: #fefefe; 
        color: #2c2c2c;
        line-height: 1.8;
        background-image: linear-gradient(90deg, transparent 79px, #abced4 79px, #abced4 81px, transparent 81px);
        background-size: 100px 100%;
      }
      .container { 
        max-width: 700px; 
        padding: 40px 60px 40px 100px;
        margin: 40px auto;
        background: #fff;
        box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
      }
      h1, h2, h3 { 
        color: #1a472a; 
        border: none;
        font-family: 'Georgia', serif;
      }
      h1 { font-size: 28px; text-align: center; margin-bottom: 30px; }
      h2 { font-size: 20px; margin-top: 30px; }
      p { text-align: justify; margin-bottom: 18px; text-indent: 2em; }
      code { 
        background: #f8f8f8; 
        color: #8b4513; 
        font-family: 'Courier New', monospace;
        border-radius: 2px;
      }
      pre { 
        background: #f8f8f8; 
        border: 1px solid #d0d0d0;
        border-radius: 4px;
      }
      blockquote { 
        border-left: 3px solid #8b4513; 
        background: #faf7f0;
        font-style: italic;
        color: #5a5a5a;
        padding: 15px 25px;
        margin: 20px 0;
      }
    `,
    'dark-pro': baseCSS + `
      body { 
        font-family: 'SF Pro Text', -apple-system, BlinkMacSystemFont, Arial, sans-serif;
        background: #1a1a1a; 
        color: #e4e4e7;
        line-height: 1.7;
      }
      .container { 
        max-width: 850px; 
        background: #1f1f1f;
        border: 1px solid #333;
        border-radius: 12px;
        padding: 40px;
        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
      }
      h1, h2, h3 { 
        color: #f4f4f5; 
        border: none;
        font-weight: 600;
      }
      h1 { font-size: 32px; }
      h2 { font-size: 24px; color: #a1a1aa; }
      h3 { font-size: 20px; color: #a1a1aa; }
      p { color: #d4d4d8; }
      code { 
        background: #2a2a2a; 
        color: #f97316; 
        border: 1px solid #404040;
        border-radius: 6px;
        font-family: 'SF Mono', Monaco, monospace;
      }
      pre { 
        background: #161616; 
        border: 1px solid #404040;
        border-radius: 8px;
        color: #e4e4e7;
      }
      blockquote { 
        border-left: 4px solid #3b82f6; 
        background: rgba(59, 130, 246, 0.1);
        color: #e4e4e7;
        border-radius: 0 8px 8px 0;
      }
      table th { background: #2a2a2a; color: #f4f4f5; }
      table td { border-color: #404040; }
    `,
    'gradient-modern': baseCSS + `
      body { 
        font-family: 'Inter', -apple-system, BlinkMacSystemFont, Arial, sans-serif;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); 
        color: #fff;
        min-height: 100vh;
        margin: 0;
      }
      .container { 
        max-width: 800px; 
        background: rgba(255, 255, 255, 0.1);
        backdrop-filter: blur(10px);
        border: 1px solid rgba(255, 255, 255, 0.2);
        border-radius: 16px;
        padding: 40px;
        margin: 40px auto;
        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
      }
      h1, h2, h3 { 
        color: #fff; 
        border: none;
        font-weight: 700;
        text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
      }
      h1 { font-size: 36px; margin-bottom: 20px; }
      p { color: rgba(255, 255, 255, 0.9); line-height: 1.8; }
      code { 
        background: rgba(0, 0, 0, 0.2); 
        color: #ffeb3b; 
        border: 1px solid rgba(255, 255, 255, 0.1);
        border-radius: 6px;
      }
      pre { 
        background: rgba(0, 0, 0, 0.3); 
        border: 1px solid rgba(255, 255, 255, 0.1);
        border-radius: 8px;
        color: #e8eaf6;
      }
      blockquote { 
        border-left: 4px solid #ffeb3b; 
        background: rgba(255, 255, 255, 0.05);
        color: rgba(255, 255, 255, 0.95);
      }
    `,
    'minimalist-zen': baseCSS + `
      body { 
        font-family: 'Noto Serif', Georgia, serif;
        background: #fefefe; 
        color: #333;
        line-height: 1.8;
        font-size: 16px;
      }
      .container { 
        max-width: 600px; 
        padding: 60px 40px;
        margin: 0 auto;
      }
      h1, h2, h3 { 
        color: #2c2c2c; 
        border: none;
        font-weight: 400;
        margin-top: 48px;
        margin-bottom: 24px;
      }
      h1 { font-size: 24px; text-align: center; }
      h2 { font-size: 20px; }
      h3 { font-size: 18px; }
      p { 
        margin-bottom: 24px; 
        text-align: justify;
        color: #444;
      }
      code { 
        background: none; 
        color: #666; 
        font-family: 'Courier New', monospace;
        border-bottom: 1px dotted #ccc;
        padding: 0;
      }
      pre { 
        background: #f9f9f9; 
        border: none;
        border-left: 2px solid #ddd;
        padding: 20px;
        margin: 24px 0;
        font-family: 'Courier New', monospace;
      }
      blockquote { 
        border: none;
        background: none;
        font-style: italic;
        color: #666;
        margin: 24px 0;
        padding: 0 24px;
        position: relative;
      }
      blockquote::before { 
        content: '"'; 
        font-size: 48px; 
        color: #ddd; 
        position: absolute; 
        left: -10px; 
        top: -10px;
      }
    `,
    'academic': baseCSS + `
      body { font-family: 'Times New Roman', serif; line-height: 1.8; }
      .container { max-width: 700px; }
      h1, h2, h3 { text-align: center; }
    `,
    'blog': baseCSS + `
      .container { max-width: 600px; }
      h1 { color: #2563eb; }
      p { text-align: justify; }
    `,
    'docs': baseCSS + `
      body { font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; }
      .container { max-width: 700px; }
    `,
    'minimal': baseCSS + `
      body { font-size: 14px; }
      h1, h2 { border: none; }
      .container { max-width: 900px; }
    `,
    'magazine': baseCSS + `
      body { font-family: 'Georgia', 'Times New Roman', serif; }
      .container { max-width: 700px; }
    `,
    'newspaper': baseCSS + `
      body { font-family: 'Georgia', 'Times New Roman', serif; }
      .container { max-width: 700px; }
    `,
    'book': baseCSS + `
      body { font-family: 'Georgia', 'Times New Roman', serif; }
      .container { max-width: 700px; }
    `,
    'presentation': baseCSS + `
      body { font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; }
      .container { max-width: 800px; }
    `
  }
  
  return themeCSS[selectedTheme.value as keyof typeof themeCSS] || baseCSS
}

// 面板拖拽
let isResizing = false

function startResize(event: MouseEvent) {
  isResizing = true
  document.addEventListener('mousemove', doResize)
  document.addEventListener('mouseup', endResize)
  event.preventDefault()
}

function doResize(event: MouseEvent) {
  if (!isResizing) return
  
  const container = document.querySelector('.h-screen')
  if (!container) return
  
  const containerRect = container.getBoundingClientRect()
  const newWidth = event.clientX - containerRect.left
  
  leftPanelWidth.value = Math.max(300, Math.min(window.innerWidth * 0.7, newWidth))
}

function endResize() {
  isResizing = false
  document.removeEventListener('mousemove', doResize)
  document.removeEventListener('mouseup', endResize)
}

onMounted(() => {
  markdownContent.value = placeholderText
})
</script>

<style scoped>
/* 自定义滚动条 */
.overflow-auto::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

.overflow-auto::-webkit-scrollbar-track {
  background: transparent;
}

.overflow-auto::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 3px;
}

.overflow-auto::-webkit-scrollbar-thumb:hover {
  background: #94a3b8;
}

.dark .overflow-auto::-webkit-scrollbar-thumb {
  background: #475569;
}

.dark .overflow-auto::-webkit-scrollbar-thumb:hover {
  background: #64748b;
}

/* 编辑器样式 */
textarea {
  font-family: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New', monospace;
  line-height: 1.5;
  letter-spacing: 0.025em;
}

/* 选择高亮 */
textarea::selection {
  background-color: #f97316;
  color: white;
}

.dark textarea::selection {
  background-color: #fb923c;
  color: #1f2937;
}

/* Prose 样式增强 */
.prose {
  color: inherit;
}

.prose :deep(h1) {
  color: #1f2937;
  border-bottom: 2px solid #e5e7eb;
  padding-bottom: 0.5rem;
}

.prose :deep(h2) {
  color: #374151;
  border-bottom: 1px solid #e5e7eb;
  padding-bottom: 0.25rem;
}

.prose :deep(code) {
  background: #f3f4f6;
  color: #dc2626;
  padding: 0.125rem 0.25rem;
  border-radius: 0.25rem;
  font-size: 0.875em;
}

.prose :deep(pre) {
  background: #1f2937;
  color: #f9fafb;
  border-radius: 0.5rem;
  overflow-x: auto;
}

.prose :deep(blockquote) {
  border-left: 4px solid #3b82f6;
  background: #eff6ff;
  padding: 1rem;
  margin: 1rem 0;
  border-radius: 0.25rem;
}

.prose :deep(table) {
  border-collapse: collapse;
  width: 100%;
  margin: 1rem 0;
}

.prose :deep(th) {
  background: #f9fafb;
  font-weight: 600;
  padding: 0.75rem;
  border: 1px solid #e5e7eb;
}

.prose :deep(td) {
  padding: 0.75rem;
  border: 1px solid #e5e7eb;
}

/* 主题特定样式 */
.prose-invert :deep(h1),
.prose-invert :deep(h2) {
  color: #f9fafb;
  border-color: #374151;
}

.prose-invert :deep(code) {
  background: #374151;
  color: #fbbf24;
}

.prose-invert :deep(blockquote) {
  border-color: #60a5fa;
  background: #1e3a8a;
  color: #e0e7ff;
}

/* 渐变现代主题 */
.gradient-bg {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  position: relative;
}

.gradient-bg::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  border-radius: inherit;
  z-index: -1;
}

/* 苹果记事本主题 */
.prose-amber :deep(h1) {
  color: #92400e;
  font-weight: 700;
  border-bottom: 2px solid #fbbf24;
}

.prose-amber :deep(h2) {
  color: #a16207;
  font-weight: 600;
}

.prose-amber :deep(code) {
  background: #fef3c7;
  color: #92400e;
  border: 1px solid #fbbf24;
}

.prose-amber :deep(blockquote) {
  background: #fffbeb;
  border-left: 4px solid #fbbf24;
  color: #92400e;
  font-style: italic;
}

/* 赛博朋克主题 */
.prose-pink :deep(h1) {
  color: #ff0080;
  text-shadow: 0 0 10px rgba(255, 0, 128, 0.8);
  text-transform: uppercase;
  letter-spacing: 2px;
  font-weight: 700;
  border-bottom: 2px solid #ff0080;
}

.prose-pink :deep(h2) {
  color: #ff0080;
  text-shadow: 0 0 8px rgba(255, 0, 128, 0.6);
  text-transform: uppercase;
  letter-spacing: 1px;
}

.prose-pink :deep(code) {
  background: rgba(255, 0, 128, 0.1);
  color: #00ffff;
  border: 1px solid #ff0080;
  text-shadow: 0 0 5px rgba(0, 255, 255, 0.5);
}

.prose-pink :deep(blockquote) {
  background: rgba(0, 255, 255, 0.05);
  border-left: 4px solid #00ffff;
  color: #00ffff;
  text-shadow: 0 0 5px rgba(0, 255, 255, 0.3);
}

.prose-pink :deep(a) {
  color: #ff0080;
  text-shadow: 0 0 5px rgba(255, 0, 128, 0.5);
  text-decoration: none;
}

/* 霓虹科技主题 */
.prose-cyan :deep(h1) {
  color: #00d4ff;
  text-shadow: 0 0 15px rgba(0, 212, 255, 0.6);
  font-weight: 300;
  letter-spacing: 3px;
}

.prose-cyan :deep(h2) {
  color: #00d4ff;
  text-shadow: 0 0 10px rgba(0, 212, 255, 0.4);
  font-weight: 300;
  letter-spacing: 1px;
}

.prose-cyan :deep(code) {
  background: rgba(0, 212, 255, 0.1);
  color: #00ff9f;
  border: 1px solid rgba(0, 212, 255, 0.3);
}

.prose-cyan :deep(blockquote) {
  background: rgba(0, 255, 159, 0.05);
  border-left: 4px solid #00ff9f;
  color: #e0e0e0;
}

/* 复古终端主题 */
.prose-green :deep(h1)::before {
  content: ">> ";
  color: #ffff00;
}

.prose-green :deep(h2)::before {
  content: "> ";
  color: #ffff00;
}

.prose-green :deep(h1),
.prose-green :deep(h2),
.prose-green :deep(h3) {
  color: #ffff00;
  text-transform: uppercase;
  font-weight: bold;
}

.prose-green :deep(code) {
  background: #333;
  color: #ff6600;
  font-family: 'Courier New', monospace;
}

.prose-green :deep(blockquote) {
  background: #1a1a1a;
  border-left: 2px solid #ffff00;
  color: #cccccc;
}

.prose-green :deep(blockquote)::before {
  content: "// ";
  color: #ffff00;
}

/* 材料设计主题 */
.prose-blue :deep(h1) {
  color: #1976d2;
  font-weight: 500;
  margin-bottom: 8px;
}

.prose-blue :deep(h2) {
  color: #1976d2;
  font-weight: 500;
  margin-bottom: 6px;
}

.prose-blue :deep(code) {
  background: #f5f5f5;
  color: #d32f2f;
  font-family: 'Roboto Mono', monospace;
}

.prose-blue :deep(blockquote) {
  background: #e3f2fd;
  border-left: 4px solid #2196f3;
  color: #1565c0;
}

/* 经典纸质主题 */
.prose-stone :deep(h1) {
  color: #1a472a;
  font-size: 28px;
  text-align: center;
  margin-bottom: 30px;
}

.prose-stone :deep(h2) {
  color: #1a472a;
  font-size: 20px;
  margin-top: 30px;
}

.prose-stone :deep(p) {
  text-align: justify;
  margin-bottom: 18px;
  text-indent: 2em;
}

.prose-stone :deep(code) {
  background: #f8f8f8;
  color: #8b4513;
  font-family: 'Courier New', monospace;
}

.prose-stone :deep(blockquote) {
  background: #faf7f0;
  border-left: 3px solid #8b4513;
  font-style: italic;
  color: #5a5a5a;
  padding: 15px 25px;
}

/* 专业深色主题 */
.prose-slate :deep(h1) {
  color: #f4f4f5;
  font-weight: 600;
  font-size: 32px;
}

.prose-slate :deep(h2) {
  color: #a1a1aa;
  font-weight: 600;
  font-size: 24px;
}

.prose-slate :deep(h3) {
  color: #a1a1aa;
  font-weight: 600;
  font-size: 20px;
}

.prose-slate :deep(p) {
  color: #d4d4d8;
}

.prose-slate :deep(code) {
  background: #2a2a2a;
  color: #f97316;
  border: 1px solid #404040;
  font-family: 'SF Mono', Monaco, monospace;
}

.prose-slate :deep(blockquote) {
  background: rgba(59, 130, 246, 0.1);
  border-left: 4px solid #3b82f6;
  color: #e4e4e7;
}

/* 极简禅意主题 */
.prose-gray :deep(h1) {
  font-size: 24px;
  text-align: center;
  color: #2c2c2c;
  font-weight: 400;
  margin-top: 48px;
  margin-bottom: 24px;
}

.prose-gray :deep(h2) {
  font-size: 20px;
  color: #2c2c2c;
  font-weight: 400;
  margin-top: 48px;
  margin-bottom: 24px;
}

.prose-gray :deep(p) {
  text-align: justify;
  margin-bottom: 24px;
  color: #444;
}

.prose-gray :deep(code) {
  background: none;
  color: #666;
  font-family: 'Courier New', monospace;
  border-bottom: 1px dotted #ccc;
  padding: 0;
}

.prose-gray :deep(blockquote) {
  border: none;
  background: none;
  font-style: italic;
  color: #666;
  margin: 24px 0;
  padding: 0 24px;
  position: relative;
}

.prose-gray :deep(blockquote)::before {
  content: '"';
  font-size: 48px;
  color: #ddd;
  position: absolute;
  left: -10px;
  top: -10px;
}

/* 书籍风格 */
.bg-cream {
  background-color: #fefcf6;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .columns-2,
  .columns-3 {
    columns: 1;
  }
}
</style> 